<script setup lang="ts">
import type { CronProps } from './types';

import { computed, ref, watch } from 'vue';

const props = defineProps<CronProps>();

const emit = defineEmits<{
    change: [name: any, value: string, from?: string];
}>();

const radioValue = ref(1);
const cycle01 = ref(0);
const cycle02 = ref(1);
const average01 = ref(0);
const average02 = ref(1);
const checkboxList = ref<number[]>([]);

// 计算两个周期值
const cycleTotal = computed(() => {
    const cycle01Value = props.check(cycle01.value, 0, 22);
    const cycle02Value = props.check(cycle02.value, cycle01Value ? cycle01Value + 1 : 1, 23);
    return `${cycle01Value}-${cycle02Value}`;
});

// 计算平均用到的值
const averageTotal = computed(() => {
    const average01Value = props.check(average01.value, 0, 22);
    const average02Value = props.check(average02.value, 1, 23 - average01Value || 0);
    return `${average01Value}/${average02Value}`;
});

// 计算勾选的checkbox值合集
const checkboxString = computed(() => {
    const str = checkboxList.value.join(',');
    return str === '' ? '*' : str;
});

const radioChange = () => {
    if (props.cron.min === '*') {
        emit('change', 'min', '0', 'hour');
    }
    if (props.cron.second === '*') {
        emit('change', 'second', '0', 'hour');
    }
    switch (radioValue.value) {
        case 2: {
            cycleChange();
            break;
        }
        case 3: {
            averageChange();
            break;
        }
        case 4: {
            checkboxChange();
            break;
        }
        default: {
            emit('change', 'hour', '*');
            break;
        }
    }
};

// 周期两个值变化时
const cycleChange = () => {
    cycle02.value = Number(cycleTotal.value.split('-')[1]);
    if (radioValue.value === 2) {
        emit('change', 'hour', cycleTotal.value);
    }
};

// 平均两个值变化时
const averageChange = () => {
    if (radioValue.value === 3) {
        emit('change', 'hour', averageTotal.value);
    }
};

// checkbox值变化时
const checkboxChange = () => {
    if (radioValue.value === 4) {
        emit('change', 'hour', checkboxString.value);
    }
};

watch(radioValue, radioChange);
watch(cycleTotal, cycleChange);
watch(averageTotal, averageChange);
watch(checkboxString, checkboxChange);

defineExpose({
    radioValue,
    cycle01,
    cycle02,
    average01,
    average02,
    checkboxList,
});
</script>

<template>
    <el-form>
        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="1" />
                <el-text tag="b" class="w-11">每小时</el-text>
                &nbsp;允许的通配符[, - * /]
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="2" />
                <el-text tag="b" class="w-10">周期</el-text>
                从&nbsp;
                <el-input-number v-model="cycle01" :min="0" :max="22" />
                &nbsp;-&nbsp;
                <el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="23" />&nbsp;小时
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="3" />
                从&nbsp;
                <el-input-number v-model="average01" :min="0" :max="22" />
                &nbsp;小时开始，每&nbsp;
                <el-input-number v-model="average02" :min="1" :max="23 - average01 || 0" />
                &nbsp;小时执行一次
            </div>
        </el-form-item>

        <el-form-item>
            <div class="flex w-full">
                <el-radio v-model="radioValue" :value="4" />
                <el-text tag="b" class="w-10">指定&nbsp;</el-text>
                <el-select clearable v-model="checkboxList" placeholder="可多选" multiple collapse-tags :max-collapse-tags="10">
                    <el-option v-for="item in 24" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
                </el-select>
            </div>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.el-radio {
    margin-right: 0;
}
</style>
